<template>
	<view class="custom-navbar" :style="navbarStyle">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<view class="navbar-content">
			<view class="navbar-left">
				<u-icon v-if="showBack" name="arrow-left" size="22" @click="$emit('back')"></u-icon>

				<u-search v-if="showSearch" :model-value="searchValue"
					@update:model-value="(val) => $emit('update:searchValue', val)" placeholder="搜索"
					:show-action="false" height="32" style="width: 150rpx;" bg-color="#f5f5f5" shape="round"
					@search="$emit('search')" @click-icon="$emit('click-search')" class="navbar-search">
				</u-search>
			</view>

			<view class="navbar-title-wrapper">
				<text class="navbar-title">{{ title }}</text>
			</view>

			<view class="navbar-right">
				<slot name="right">
					<!-- 	<u-icon v-if="showMore" name="more-dot-fill" size="20" @click="$emit('click-more')">
					</u-icon> -->
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		showBack: {
			type: Boolean,
			default: false
		},
		showSearch: {
			type: Boolean,
			default: false
		},
		showMore: {
			type: Boolean,
			default: true
		},
		searchValue: {
			type: String,
			default: ''
		},
		transparent: {
			type: Boolean,
			default: false
		},
		scrolled: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits([
		'back',
		'search',
		'click-search',
		'click-more',
		'update:searchValue'
	]);

	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0);


	// 新增滚动相关逻辑
	const isScrolled = ref(false);
	const lastScrollTop = ref(0);

	const handleScroll = () => {
		const scrollTop = uni.getWindowInfo().scrollTop;

		// 向下滚动超过10px时显示背景
		if (scrollTop > 10 && scrollTop > lastScrollTop.value) {
			isScrolled.value = true;
		}
		// 向上滚动到顶部附近时隐藏背景
		else if (scrollTop <= 10) {
			isScrolled.value = false;
		}

		lastScrollTop.value = scrollTop;
	};

	onMounted(() => {
		// 监听页面滚动
		uni.$on('onPageScroll', handleScroll);
	});

	onUnmounted(() => {
		// 移除监听
		uni.$off('onPageScroll', handleScroll);
	});
	const navbarStyle = computed(() => ({
		backgroundColor: (props.scrolled || !props.transparent) ? '#ffffff' : 'transparent',
		boxShadow: props.scrolled ? '0 1px 6px rgba(0, 0, 0, 0.1)' : 'none',
		transition: 'background-color 0.3s, box-shadow 0.3s'
	}));
</script>

<style lang="scss" scoped>
	.custom-navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		transition: background-color 0.3s, box-shadow 0.3s;

		.status-bar {
			width: 100%;
		}

		.navbar-content {
			display: flex;
			align-items: center;
			height: 44px;
			padding: 0 15rpx;

			.navbar-left {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				min-width: 80rpx;

				.navbar-search {
					margin-left: 10rpx;

					:deep(.u-search__content__input) {
						font-size: 14px !important;
					}
				}
			}

			.navbar-title-wrapper {
				flex: 1;
				min-width: 0;
				display: flex;
				justify-content: center;
				padding: 0 20rpx;

				.navbar-title {
					font-size: 34rpx;
					font-weight: bold;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 100%;
				}
			}

			.navbar-right {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				min-width: 80rpx;
				justify-content: flex-end;
			}
		}
	}
</style>